<template>
  <div class="font-sans">
    <div class="relative min-h-screen flex flex-col sm:justify-center items-center bg-gray-100 ">
      <div class="relative sm:max-w-sm w-full">
        <div class="card bg-blue-400 shadow-lg  w-full h-full rounded-3xl absolute  transform -rotate-6"></div>
        <div class="card bg-red-400 shadow-lg  w-full h-full rounded-3xl absolute  transform rotate-6"></div>
        <div class="relative w-full rounded-3xl  px-6 py-4 bg-gray-100 shadow-md">
          <label for="" class="block mt-3 text-sm text-gray-700 text-center font-semibold">
            用户登录
          </label>
          <form method="#" action="#" class="mt-10" @submit="onSubmit">

            <div>
              <input type="text" id="username" placeholder="请输入您的账号" v-model="loginNameValue"
                class="mt-1 block w-full border-none bg-gray-100 h-11 rounded-xl shadow-lg hover:bg-blue-100 focus:bg-blue-100 focus:ring-0">
              <p>{{ errors.loginName }}</p>
            </div>

            <div class="mt-7">
              <input type="password" id="password" placeholder="请输入您的密码" v-model="passwordValue" autocomplete="off"
                class="mt-1 block w-full border-none bg-gray-100 h-11 rounded-xl shadow-lg hover:bg-blue-100 focus:bg-blue-100 focus:ring-0">
              <p>{{ errors.password }}</p>
            </div>

            <div class="mt-7 flex">
              <label for="remember_me" class="inline-flex items-center w-full cursor-pointer">
                <input id="remember_me" type="checkbox"
                  class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                  name="remember">
                <span class="ml-2 text-sm text-gray-600">
                  记住我
                </span>
              </label>

              <div class="w-full text-right">
                <a class="underline text-sm text-gray-600 hover:text-gray-900" href="#">
                  忘记密码
                </a>
              </div>
            </div>
            <div class="mt-7">
              <button type="submit"
                class="bg-blue-500 w-full py-3 rounded-xl text-white shadow-xl hover:shadow-inner focus:outline-none transition duration-500 ease-in-out  transform hover:-translate-x hover:scale-105">
                登录
              </button>
            </div>

            <div class="mt-7">
              <div class="flex justify-center items-center">
                <label class="mr-2">没有帐户?</label>
                <a href="#"
                  class=" text-blue-500 transition duration-500 ease-in-out  transform hover:-translate-x hover:scale-105">
                  创建新用户
                </a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import v from "@/plugins/validate";
import utils from "@/utils/";

const { handleSubmit, errors } = v.useForm({
  initialValues: {
    loginName: "",
    password: "",
  },
  validationSchema: {
    loginName: v.yup.string().required().label("账号"),
    password: v.yup.string().required().label("密码"),
  },
});

const { value: loginNameValue } = v.useField(
  "loginName",
  {},
  { label: "账号" }
);
const { value: passwordValue } = v.useField("password", {}, { label: "密码" });

/*
 * 点击登录后向后台发送post请求，登录成功后同时为用户设置token
 * 登录成功后跳转到主页
 */
const onSubmit = handleSubmit(async (value: any) => {
  utils.user.login(value);
});
</script>


<style scoped></style>
